<template>
  <div>
    <div>
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        class="search"
      >
        <template #label>
          <router-link to="/city">城市</router-link>
        </template>
        <template #action>
          <div>搜索</div>
        </template>
        <span>11</span>
      </van-search>
    </div>
    <div class="swiper">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in images">
          <img :src="item" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 导航区 -->
    <van-grid class="box-nav" :border="false">
      <van-grid-item to="/layout/findroom">
        <i><img src="@/assets/下载.png" alt="" /></i>
        <span>整租</span>
      </van-grid-item>
      <van-grid-item to="/layout/findroom">
        <i><img src="@/assets/下载.png" alt="" /></i>
        <span>合租</span>
      </van-grid-item>
      <van-grid-item to="/map">
        <i><img src="@/assets/下载.png" alt="" /></i>
        <span>地图找房</span>
      </van-grid-item>
      <van-grid-item to="/quchuzu">
        <i><img src="@/assets/下载.png" alt="" /></i>
        <span>去出租</span>
      </van-grid-item>
    </van-grid>
    <!-- 租房小组 -->
    <div class="zufang-box">
      <div class="title">
        <h4>租房小组</h4>
        <a href="#">更多</a>
      </div>
    </div>
    <div class="zufang-item">
      <ul>
        <li v-for="item in zfList" :key="item.id">
          <div class="img">
            <img :src="'http://liufusong.top:8080' + item.imgSrc" alt="" />
          </div>
          <span>{{ item.title }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import getZf from "@/API/zfxz";
import request from "@/utils/request";
export default {
  name: "VueHkzfMin",

  data() {
    return {
      value: "",
      images: [
        "	http://liufusong.top:8080/img/swiper/3.png",
        "	http://liufusong.top:8080/img/swiper/1.png",
        "	http://liufusong.top:8080/img/swiper/2.png",
      ],
      zfList: [],
    };
  },

  mounted() {
    this.getZf();
  },

  methods: {
    // 租房小组
    async getZf() {
      const res = await request({
        url: "/home/groups",
      });
      console.log(res);
      this.zfList = res.data.body;
    },
  },
};
</script>

<style lang="less" scoped>
body {
  background-color: #f5f5f9;
}
.box-nav {
  width: 100;
  height: 122.42px;
  i {
    margin-bottom: 10px;
    width: 60px;
    height: 60px;
    img {
      width: 100%;
    }
  }
}
.search {
  position: absolute;
  z-index: 99999;
  width: 300px;
  padding: 0;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
}
.swiper {
  width: 100%;
  height: 212px;
  img {
    width: 100%;
  }
}
.zufang-box {
  display: flex;
  width: 100%;

  .title {
    width: 100%;
    height: 20px;
    display: flex;
    padding: 0 10px;
    justify-content: space-between;
    margin: 15px;
    a {
      color: #787d82;
      font-size: 14px;
      font-weight: 400;
    }
    h4 {
      margin: 0;
    }
  }
}
.zufang-item {
  width: 100%;
  height: 140px;
  // background-color: pink;

  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    li {
      width: 45%;
      height: 60px;
      background-color: #4eac6e;
      margin-top: 5px;
      margin-bottom: 5px;
      display: flex;
      align-items: center;
      .img {
        width: 50px;
        height: 50px;
        // background-color: pink;
        margin: 0 10px;
        img{
          width: 100%;
        }
      }
    }
  }
}
</style>
